<template>
  <div>
    <el-form :rules="rules" :model="articleForm" ref="articleForm">
      <el-form-item label="文章标题：" prop="title">
        <el-input
          v-model="articleForm.title"
          placeholder="根据文章标题搜索"
          style="width: 80%; margin-top: 4px"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容：" prop="articleBody">
        <quillEditor
          :options="editorOption"
          v-model="articleForm.articleBody"
          style="height: 100%; margin-left: 90px; width: 424px"
        ></quillEditor>
      </el-form-item>
      <el-form-item
        label="视频地址："
        prop="videoURL"
        style="padding-left: 8px"
      >
        <el-input
          v-model="articleForm.videoURL"
          placeholder="根据文章标题搜索"
          style="width: 81%; margin-top: 4px"
        ></el-input>
      </el-form-item>
    </el-form>
    <span style="margin-left: 200px">
      <el-button @click="closeEdit">取 消</el-button>
      <el-button type="primary" @click="hEditSubmit">确 定</el-button>
    </span>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { update } from '@/api/hmmm/articles'
export default {
  components: {
    quillEditor
  },
  props: ['articleForm'],

  data () {
    return {
      editorOption: {
        modules: {
          // modules为自定义标题栏，使用默认的话可去掉modules
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 分别对应的是： 粗体，斜体，下划线，删除线
            ['blockquote', 'code-block'], //
            // [{ header: 1 }, { header: 2 }],
            // [{ list: 'ordered' }, { list: 'bullet' }], // 显示有序和无序列表
            // [{ color: [] }, { background: [] }], // 显示背景字体颜色
            // [{ font: [] }], // 显示字体选择
            [{ align: [] }], // 显示居中
            ['link', 'image'] // 显示超链接, 插入图片
          ]
        }
      },
      // 表单验证规则
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeEdit () {
      this.$emit('closeEdit')
    },
    async hEditSubmit () {
      this.$refs.articleForm.validate(async (valid) => {
        if (!valid) {
          this.$message.error('修改失败!')
        } else {
          try {
            const res = await update(this.articleForm)
            console.log('修改完成之后的回显', res)

            this.$message.success('修改文章成功!')
            //  关闭弹层
            this.closeEdit()
          } catch (err) {
            this.$message.error(err.message)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
